<script lang="ts" setup>
import RecommendArticle from './RecommendArticle.vue'
import RecommendRepository from './RecommendRepository.vue'
import RecommendOrganization from './RecommendOrganization.vue'
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';

const { $fetch } = useFetch();

const { data: primeList } = useAsyncData(
  'home:prime',
  () => $fetch('/information/good_list'),
);
</script>

<template>
  <section class="page-home-prime mt-20">
    <ul>
      <li class="mt-20 first:(mt-0)" v-for="(item, index) in primeList" :key="index">
        <template v-if="item.resourceType === 'information'">
          <RecommendArticle :data="item" />
        </template>
        <template v-else-if="item.resourceType === 'warehouse'">
          <RecommendRepository :data="item" />
        </template>
        <template v-else-if="item.resourceType === 'org'">
          <RecommendOrganization :data="item" />
        </template>
      </li>
    </ul>
  </section>
</template>

<style lang="scss" scoped>
</style>
